<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022-8-22晚作业</title>
    <style>
        tbody {
            margin: 100 auto;
            border:collapse;
            border-style:none;
            border-spacing:0;
            background: skyblue;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="5" cellpadding="0">
        <tr>
            <td>笑话标题</td>
            <td>笑话内容</td>
        </tr>
    </table>
    <script>
        //获取元素
        var tbody = document.querySelector('tbody');

        function ajaxTool(method, url, data, cb) {
            //method表示请求方法"GET"
            //url表示请求的地址 https://api.gugudata.com/news/joke/demo
            //data是你传进来的配置对象
            //cb是回调函数 一般用于渲染到页面上
            const xhr = new XMLHttpRequest();
            //用来装后面参数的字符串
            let a = "";
            //对象键名=对象键值
            for (const key in data) {
                a += `${key}=${data[key]}&`  
                // console.log(key);//key是键名
                // console.log(data[key]);data[key]是键值
            }
            let newUrl = url + '?' + a.slice(0, -1);//slice干掉末尾的&
            xhr.open(method, newUrl);
            xhr.send();
            xhr.onload = function () {
                if (xhr.status === 200) {
                    cb(JSON.parse(xhr.responseText));
                }
            }
        }
        let res = {
            type: '冷笑话',
            // pageindex: 1,
            // pagesize: 2
        }
        ajaxTool("GET","https://api.gugudata.com/news/joke/demo",res,
        function(xhz) {
            console.log(xhz);
            console.log(xhz.Data);
            console.log(xhz.Data[0].Title);
            xhz.Data.forEach((item)=>{//item获取到的是Data的每一个数据
                console.log(item);
                tbody.innerHTML +=
                `
                <tr>
                <td>${item.Title}</td>    
                <td>${item.Content}</td>    
                </tr>
                `
            });
        });
    </script>
</body>
</html>